<template>
  <div class="title">默认排列 align-items: stretch</div>
  <div class="grid-5">
    <div class="block-cont item-cont"><div>1</div></div>
    <div class="block-cont"><div>2</div></div>
    <div class="block-cont">3</div>
    <div class="block-cont">4</div>
    <div class="block-cont">5</div>
  </div>

  <div class="title">align-items: flex-start</div>
  <div class="grid-5 align-top">
    <div class="block-cont item-cont"><div>1</div></div>
    <div class="block-cont"><div>2</div></div>
    <div class="block-cont">3</div>
    <div class="block-cont">4</div>
    <div class="block-cont">5</div>
  </div>

  <div class="title">align-items: center</div>
  <div class="grid-5 align-middle">
    <div class="block-cont item-cont"><div>1</div></div>
    <div class="block-cont"><div>2</div></div>
    <div class="block-cont">3</div>
    <div class="block-cont">4</div>
    <div class="block-cont">5</div>
  </div>

  <div class="title">align-items: flex-end</div>
  <div class="grid-5 align-end">
    <div class="block-cont item-cont"><div>1</div></div>
    <div class="block-cont"><div>2</div></div>
    <div class="block-cont">3</div>
    <div class="block-cont">4</div>
    <div class="block-cont">5</div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped>
  .grid-5 {
    border: 1px solid #000;
  }
  .item-cont {
    height: 80px;
  }
  .block-cont {
    border: 1px solid #2d552b;
    background: #60d659;
  }

  .title {
    padding-top: 20px;
    font-size: 16px;
    color: rgb(252, 71, 0);
  }
  .align-stretch {
    align-items: stretch;
  }
  .align-top {
    align-items: flex-start;
  }
  .align-middle {
    align-items: center;
  }
  .align-bottom {
    align-items: flex-end;
  }
</style>
